<template>
    <div class="detail-param-info" v-if="Object.keys(params).length">
        <div class="sizes">
            <ul v-for="item,index in params.sizes[0]" :key="index">
                <li v-for="item,index in item" :key="index">{{item}}</li>
                <!-- <li>{{item[0]}}</li>
                <li>{{item[1]}}</li>
                <li>{{item[2]}}</li>
                <li>{{item[3]}}</li>
                <li>{{item[4]}}</li> -->
            </ul>
        </div>
        <div class="infos">
            <ul v-for="item,index in params.infos" :key="index">
                <li>{{item.key}}</li>
                <li>{{item.value}}</li>
                
                
            </ul>
            <div v-if="params.image.length !== 0">
                    <img :src="params.image" alt="">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        params: {
            type: Object,
            default() {
                return {}
            }
        }
    }
}
</script>


<style scoped>
    .sizes{
        padding: 15px 30px 25px 15px;
        border-top: 6px solid #eee;
        border-bottom: 6px solid #eee;
    }
    .sizes ul{
        display: flex;
        text-align: center;
        /* margin: 15px 0; */
        border-bottom: 1px solid #eee;
        padding: 16px 0;
    }

    .sizes ul li{
        flex: 1;
    }

    .sizes ul li:nth-child(1){
        flex: 2;
        text-align: left;
    }

    .infos{
        padding: 10px 15px 25px 15px;
        border-bottom: 6px solid #eee;
    }

    .infos ul{
        display: flex;
        /* margin: 18px 0; */
        border-bottom: 1px solid #eee;
        padding: 16px 0;
    }

    .infos ul li{
        flex: 1;
    }

    .infos ul li:nth-child(2){
        flex: 2;
        color: red;
    }

    .infos img{
        width: 100%;
    }
</style>